<template>
	<span 
		class="views" 
		@click.stop="handleLikes"
		:class="{ 'active': props.likes_status }">
		<up-icon
			v-if="!props.likes_status"
			name="thumb-up" 
			size="24"></up-icon>
		<up-icon
			v-else
			color="#d81e06"
			name="thumb-up-fill" 
			size="24"></up-icon>
		{{props.likes}}
	</span>
</template>

<script lang="ts" setup name="">
	import { defineProps,defineEmits } from 'vue'

	const props = defineProps({  
		likes: Number,  
		likes_status: Boolean  
	});  
	const emit = defineEmits(['update:likes_status'])
	
	function handleLikes() {  
	  emit('update:likes_status', !props.likes_status)  
	} 
</script>

<style scoped lang="scss">
	.views{
		display: flex;
		align-items: center;
	}
</style>